<template>
  <a-select :loading="loading" v-model:value="model" show-search placeholder="请选择或者筛选" style="width: 200px" :options="rows"
    :fieldNames="fieldNames" :filter-option="filterOption" @change="onChange"></a-select>
</template>

<script setup>
import { onMounted, ref,watch } from 'vue';
import { getAllName } from '@/api/store'

const props = defineProps(['filter','value'])
const emit = defineEmits(['update:value'])


const fieldNames = {
  label: 'name',
  value: 'id',
}

const loading = ref(false)
const rows = ref([])
const model = ref(props.value)

onMounted(() => {
  load()
})

watch(()=>props.value,v=>{
  parseProps()
})

watch(()=>({...props.filter}),()=>{
  load()
})

const parseProps =()=>{
  model.value = props.value;
}

const load = async () => {
  loading.value = true;
  const res = await getAllName(props.filter)
  loading.value = false
  rows.value = res.data
}

const filterOption = (input, option) => {
  return option.name.indexOf(input) >= 0
}

const onChange = (key)=>{
  emit('update:value', key)
}

</script>

<style lang="less" scoped></style>